<!DOCTYPE html>
<html>
<head>
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <link href="<%= global.config.publicPath %>/uedit/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <link href="<%= global.config.publicPath %>/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet">


    <style type="text/css">
        .sku-atom-list {
            display : inline-block;
        }
        .sku-atom.active{
            margin-bottom : 90px;
        }
        .sku-atom {
            border : 0px solid #AAA;
            padding : 4px;
            display : inline-block;
            margin-right : 10px;
            margin-top : 5px;
            width : 114px;
            vertical-align : middle;
            text-align : center;
            position : relative;
            border-radius : 4px;
            cursor : pointer;
        }
        .close-modal{
            display : none;
        }
        .close-modal.small{
            top : -6px;
            right : -8px;
            width : 18px;
            height : 18px;
            font-size : 14px;
            line-height : 16px;
            border-radius: 9px;
        }
        .close-modal {
            position : absolute;
            z-index : 2;
            color : #fff;
            text-align: center;
            cursor : pointer;
            background: rgba(153,153,153,0.6);
        }

        .sku-atom span{
            display : block;
            width : 104px;
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        }
        .sku-atom .upload-img-wrap{
            position : absolute;
            left : 0;
            padding : 2px;
            width : 114px;
            background: #fff;
            border-radius : 4px;
            border : 1px solid #dcdcdc;
        }
        .sku-atom .upload-img-wrap .arrow{
            position : absolute;
            width : 0;
            height : 0;
            top : -5px;
            left : 44%;
            border-style : solid;
            border-color : transparent;
            border-left : 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom : 5px solid #000000;
        }
        .sku-atom .upload-img-wrap .arrow::after{
            position : absolute;
            display : block;
            width : 0;
            height : 0;
            border-color : transparent;
            border-style : solid;
            top : -10px;
            margin-left : -10px;
            border-bottom-color : #fff;
            border-top-width : 0;
            border-width : 10px;
            content : "";
        }
        .sku-atom .upload-img-wrap .add-image{
            width : 110px;
            height : 84px;
            line-height : 84px;
            text-align : center;
            background : #fff;
            font-size : 30px;
            color : #e5e5e5;
            cursor : pointer;
        }
        .sku-atom .upload-img-wrap .add-image .js-btn-add .fileupload{
            position : absolute;
            top : 0;
            right : 0;
            margin : 0;
            opacity : 0;
            cursor : pointer;
        }
    </style>
</head>
<body>
<% include ../common/header.ejs %>
<div class="container">
    <div class="dolphin-row main page-content">
        <div class="page-header">
            <h5 class="content-title">会员管理</h5>
            <input id="publicContextPath" type="hidden" value="<%= global.config.contextPath%>" />
            <div class="pull-left">
                <ul class="fl">
                    <li>
                        <button class="btn btn-block btn-info newData"><i class="fui-plus-circle icon-menu"></i>
                            <span>新建会员</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="queryCondition">
            <form class="query-form">
                <div class="row">
                    <div class="col-md-3">
                        <label>会员名称：</label>
                        <input type="text" placeholder="名称模糊查询" name="name_like">
                    </div>
                    <div class="col-md-3">
                        <label>联系手机：</label>
                        <input type="text" placeholder="手机号模糊查询" name="phone_like">
                    </div>
                    <div class="col-md-5" style="margin-top: 3px">
                        <label class="col-md-offset-1 col-md-2 control-label" style="width: 100px">关注时间</label>
                        <div class="col-md-3">
                            <div class="input-group date dolphin_date_picker" style="margin-left: -20px">
                                <input class="width3" type="text" name="_startDate" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <!--<input type="text" class="width3" name="_startDate" placeholder="yyyy-MM-dd">-->
                        <div class="col-md-1" style="text-align: center;margin-left: 60px">
                            ~
                        </div>
                        <!--<input type="text" class="width3" name="_endDate" placeholder="yyyy-MM-dd">-->
                        <div class="col-md-3" style="margin-left: -20px">
                            <div class="input-group date dolphin_date_picker">
                                <input class="width3" type="text" name="_endDate" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <label>微信昵称：</label>
                        <input type="text" placeholder="昵称模糊查询" name="nickname_like">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-sm btn-inverse btn-query" type="button">搜索</button>
                    </div>
                </div>
            </form>
        </div>

        <div id="dataList" class="box-content"></div>
    </div>
</div>

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="dataModalLabel">会员编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal edit-form">
                    <input type="hidden" class="form-control" name="id" />
                    <input type="hidden" class="form-control" name="weChat" />
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员名称</label>
                        <div class="col-md-6">
                            <input class="form-control" name="name" type="text" dol-validate="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员编码</label>
                        <div class="col-md-6">
                            <input class="form-control" name="code" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">人员性别</label>
                        <div class="col-md-6">
                            <select class="form-control" name="sex">
                                <option value=""></option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证照片</label>
                        <input id="icFrontImg" name="icFrontImg" type="hidden" value=""/>
                        <input id="icBackImg" name="icBackImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small fjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">+
                                                <input  style="position:absolute;width:300px;top:0;right:0;margin:0;opacity:0;cursor:pointer;"
                                                       class="fimgupload"  type="file" name="upfile" multiple>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small bjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div  class="add-image js-btn-add">+
                                                <input  style="position:absolute;width:300px;padding-left:100px;left:0;top:0;right:0;margin:0;opacity:0;cursor:pointer;"
                                                       class="bimgupload"  type="file" name="upfile" multiple>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证号码</label>
                        <div class="col-md-6">
                            <input class="form-control" name="idCard" type="text" dol-validate="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">头像</label>
                        <input id="avatarImg" name="avatarImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small ajs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">+
                                                <input  style="position:absolute;width:300px;top:0;right:0;margin:0;opacity:0;cursor:pointer;"
                                                        class="aimgupload"  type="file" name="upfile" multiple>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">手机号码</label>
                        <div class="col-md-6">
                            <input class="form-control" name="phone" type="tel" dol-validate="required" 　 id="checkPhone" style="display: inline">
                            <span class="tel-msg" style="float: right;margin: -30px -60px"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">推荐人手机号</label>
                        <div class="col-md-6">
                            <input class="form-control" name="introducer" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员状态</label>
                        <div class="col-md-6">
                            <select class="form-control" name="status">
                                <option value="4">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员类型</label>
                        <div class="col-md-6">
                            <select class="form-control" name="userType">
                                <option value="2">普通用户</option>
                                <option value="4">销售员</option>
                                <option value="1">管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">实名认证状态</label>
                        <div class="col-md-6">
                            <select class="form-control" name="certification">
                                <option value="0">未验证</option>
                                <option value="1">审核中</option>
                                <option value="2">通过验证</option>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modelSave">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="idCardDataModal" tabindex="-1" role="dialog" aria-labelledby="idCardDataModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="idCardDataModalLabel">身份证上传</h4>
            </div>
            <div class="modal-body" id="idcardWin">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modelUpload" data-id="">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <img id="showBigImg" src="/page/images/house_default.png" />
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<% include ../common/footer.ejs %>

<script>
    $(function () {
       $('<script type="text/plain" id="myEditor" style="width:500px;height:240px;">').appendTo($('#idcardWin'));
    });
</script>
 <script src="<%= global.config.publicPath %>/uedit/umeditor.config.js"></script>
 <script src="<%= global.config.publicPath %>/uedit/umeditor.min.js"></script>
 <script src="<%= global.config.publicPath %>/uedit/lang/zh-cn/zh-cn.js"></script>

                        <script>
                            $(function () {
                                yams.page.um = UM.getEditor('myEditor', {
                                    imageUrl: "<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/file/"
                                    , imagePath: "/uploadFiles"
                                    , imageFieldName: "upfile"
                                    , initialFrameWidth: '100%'
                                    , initialFrameHeight: 420
                                    , autoHeightEnabled: false
                                });

                            });
                        </script>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/jquery.fileupload.js"></script>
</body>
</html>
